<template>
	<view class="project_tj_item">
		<view class="top">
			<u-icon name='star-fill' @click="collectionFile(data.id)" :color="data.isShrine ? '#ffb82a' :'#f2f2f2'"></u-icon>
			<view class="top_left">
				{{data.name || ''}}
			</view>
			<view class="top_right" @click="downLoadFile(data.url)">下载</view>
		</view>
		<view class="bottom">
			{{data.createTime || ''}}
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
export default{  //政策文件item组件
	name:"Poject_tj_item",
	props:{
		fileData:{
			type:Object,
			default: ()=>{
				return {}
			},
		},
	},
	data(){
		return{
			isClick:true,
			data:{},
		}
	},
	mounted(){
		this.data = JSON.parse(JSON.stringify(this.fileData))
	},
	methods:{
		downLoadFile(url){
			uni.downloadFile({
				url: this.$my_global.url + url, 
				header:{
					ssid:uni.getStorageSync('token')
				},
				success: (res) => {
					if (res.statusCode === 200) {
						wx.openDocument({
							filePath: res.tempFilePath,
							success: function(res) {
								
							}
			
						})
						this.$refs.uToast.show({
							title: '下载成功',
							type: 'success',
							position: 'top'
						})
					}
				}
			});
		},
		collectionFile(id){
			if(this.isClick){
				this.isClick = false
				let method = 'POST'
				if(this.data.isShrine){
					method = 'DELETE'
				}
				this.$ajax({
					url:`/wx/shrine/${id}`,
					method:method,
					success:res =>{
						this.$refs.uToast.show({
							title: '成功',
							type: 'success',
							position: 'top'
						})
						this.data.isShrine = !this.data.isShrine
						this.isClick = true
					},
				})
				
			}
		},
		getCollectionId(){
			
		}
	},
	created(){
		
	},
}
</script>

<style lang="scss" scoped>
.project_tj_item{
	width: 100%;
	background-color: #ffffff;
	height:fit-content;
	@include flex_layout_column;
	align-items: stretch;
	padding: 10px 15px 0 15px;
	box-sizing: border-box;
	.top{
		@include flex_layout_row;
		justify-content: flex-start;
		align-items: center;
		font-size: 15px;
		line-height: 20px;
		color: #323232;
		margin-bottom: 5px;
		u-icon{
			width: 20px;
			@include flex_layout_row;
			justify-content: flex-start;
			align-items: center;
			margin-right: 5px;
		}
		.top_left{
			flex: 5;
			width: 0;
			word-wrap:break-word;
			width: calc(100% - 30px);
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
		.top_right{
			color: #8294FD;
			border-bottom: 1px solid #8294FD;
			width: 30px;
			margin-left: 10px;
		}
	}
	.bottom{
		width: 100%;
		@include flex_layout_row;
		justify-content: flex-end;
		text-align: right;
		align-items: center;
		border-bottom: 1px solid #f0f0f0;
		font-size: 12px;
		color: #757575;
		padding-bottom: 10px;
	}
}
</style>
